<template>
 <div class="switch" id="switch-cnt" :class="{'isgx':index.ishua,'istxr':!index.isshow}" >
    <div class="switch_circle" :class="{istxr:!index.isshow}"></div>
    <div class="switch_circle switch_circle-t" :class="{istxr:!index.isshow}"></div>

    <div class="switch_container" id="switch-c1" :class="{ishidden:!index.isshow}">
        <h2 class="switch_title title" style="letter-spacing: 0; ">欢迎来到某不知名大学牲的网站！</h2>
        <p class="switch_description description">已经有账号了嘛，去登入账号来进入奇妙世界吧！！！</p>
        <button class="switch_button button switch-btn"  @click="toggle">去登录</button>
    </div>

    <div class="switch_container" id="switch-c2" :class="{ishidden:index.isshow}">
        <h2 class="switch_title title" style="letter-spacing: 0;">欢迎来到某不知名大学牲的网站！</h2>
        <p class="switch_description description">去注册一个账号，成为尊贵的粉丝会员，让我们踏入奇妙的旅途！</p>
        <button class="switch_button button switch-btn" @click="toggle">去注册</button>
    </div>
  </div>
</template>

<script>
import {ref} from'vue'
import {userindex} from'../../stores/index'
import {qufan} from '@/hooks/login.js'
export default {
  name: 'shuru',
  setup(){
    const index=userindex()
    function toggle(){
      qufan();
    }
    return{index,toggle}
  }
  
};
</script>

<style scoped>
.description {
  font-size: 14px;
  letter-spacing: 0.25px;
  text-align: center;
  line-height: 1.6;
}
.switch {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 400px;
  padding: 50px;
  z-index: 200;
  transition: 1.25s;
  background-color: #ecf0f3;
  overflow: hidden;
  box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #d1d9e6;
}

.switch_circle {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: #ecf0f3;
  box-shadow: inset 8px 8px 12px #b8bec7, inset -8px -8px 12px #fff;
  bottom: -60%;
  left: -60%;
  transition: 1.25s;
}

.switch_circle-t {
  top: -30%;
  left: 60%;
  width: 300px;
  height: 300px;
}

.switch_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  width: 400px;
  padding: 50px 55px;
  transition: 1.25s;
}

.switch_button {
  cursor: pointer;
}

.switch_button:hover,
.submit:hover {
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
  transform: scale(0.985);
  transition: 0.25s;
}

.switch_button:active,
.switch_button:focus {
  box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
  transform: scale(0.97);
  transition: 0.25s;
}
.istxr {
  left: calc(100% - 400px);
  transition: 1.25s;
  transform-origin: left;
}
.isgx {
  animation: isgx 1.25s;
}

@keyframes isgx {

  0%,
  10%,
  100% {
      width: 400px;
  }

  30%,
  50% {
      width: 500px;
  }
}
</style>